<template>
  <div style="color: #666;width: 70%;margin: 0 auto">
    <div style="margin: 20px 0; ">
      <div style="display: flex;justify-content: space-between">
        <el-button type="info" @click="$router.go(-1)" size="small">返回</el-button>
        <div style="display: flex;justify-content: space-between">
          <el-button type="warning" @click="collect" size="small" style="margin-right: 10px">收藏</el-button>
        </div>
      </div>
      <div style="text-align: center"><h1>{{ item.name }}</h1></div>
      <div style="font-size: 14px;margin-top: 5px;display:flex;align-items: center;justify-content: space-around;">
        <span>发布时间：{{ item.createDate }}</span>
      </div>
      <div style="font-size: 14px;margin-top: 5px;display:flex;align-items: center;justify-content: space-around;">
        <span>分享人：{{ item.userName }}</span>
      </div>

    </div>

      <div style="width: 90%;margin: 0 auto; ">
        <div style="margin: 10px 0;">
          <mavon-editor
              class="md"
              :subfield="false"
              :value="item.info"
              :defaultOpen="'preview'"
              :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
          />
        </div>
      </div>

    <div style="width: 90%;margin: 0 auto">
      <el-card style="box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);border-radius: 10px">
        <span>附件:</span>
        <el-button type="success" @click="download(item.file)" size="small" v-if="item.file" style="margin-left: 10px">
          点击下载
        </el-button>
        <el-button type="danger" @click="download(item.file)" size="small" :disabled="!item.file" v-if="!item.file"
                   style="margin-left: 10px">暂无下载
        </el-button>
      </el-card>
    </div>

    <div style="margin: 30px 0">
      <div style="margin: 10px 0">
        <div style="border-bottom: 2px solid #ccc; padding: 10px 0; font-size: 20px; margin-bottom:10px;">
          评论({{ comments.length }})
        </div>
        <div class="comment-send-warp">
          <el-input class="comment-send-input" size="small" type="textarea" rows="4" v-model="commentForm.content"
                    placeholder="善语结善缘，恶语伤人心"></el-input>
          <el-button :disabled="!commentForm.content" class="btn-sent-comment" type="primary" size="medium"
                     @click="save">评论
          </el-button>
        </div>
      </div>
      <div class="comment-warp">
        <div v-for="item in comments" :key="item.id">
          <div class="comment-item">
            <div class="comment-avatar">
              <el-image :src="item.avatarUrl"></el-image>
            </div> <!--  头像-->
            <div class="comment-info">
              <div class="comment-name">{{ item.nickname }}</div>
              <div class="comment-content">{{ item.content }}</div>

              <div class="comment-other">
                <div class="comment-time">
                  <i class="el-icon-time"></i><span>{{ item.time }}</span>
                </div>
                <div>
                  <el-button type="text" @click="handleReply(item.id)">回复</el-button>
                  <el-button type="text" @click="del(item.id)"
                             v-if="user.id === item.userId || user.role==='ROLE_ADMIN'">删除
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          <!--回复-->
          <template v-if="item.children.length">
            <div v-for="subItem in item.children" class="comment-item comment-item-reply">
              <div class="comment-avatar">
                <el-image :src="subItem.avatarUrl"/>
              </div> <!--  头像-->
              <div class="comment-info">
                <div class="comment-name">{{ subItem.nickname }} 回复 @ {{ subItem.pnickname }}</div>
                <div class="comment-content">{{ subItem.content }}</div>

                <div class="comment-other">
                  <div class="comment-time">
                    <i class="el-icon-time"></i><span>{{ subItem.time }}</span>
                  </div>
                  <div>
                    <el-button type="text" @click="handleReply(subItem.id)">回复</el-button>
                    <el-button type="text" @click="del(subItem.id)"
                               v-if="user.id === subItem.userId || user.role==='ROLE_ADMIN'">删除
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <el-dialog title="回复" :visible.sync="dialogFormVisible2" width="50%">
      <el-form label-width="80px" size="small">
        <el-form-item label="回复内容">
          <el-input type="textarea" v-model="commentForm.contentReply" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      item: {},
      name: "",
      total: 0,
      pageNum: 1,
      pageSize: 4,
      id: this.$route.query.id,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      commentItemId: this.$route.query.id,
      dialogFormVisible2: false,
      comments: [],
      commentForm: {},
    }
  },
  created() {
    this.load()
    this.loadComment()
  },
  methods: {
    load() {
      this.request.get("/item/" + this.id).then(res => {
        this.item = res.data
      })
    },
    download(url) {
      window.open(url)
    },
    collect() {
      const data = {
        itemId: this.id
      }
      this.request.post('/collect', data).then(res => {
        if (res.code === '200') {
          this.$message.success("收藏成功")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadComment() {
      this.request.get("/comment/tree/" + this.commentItemId).then(res => {
        this.comments = res.data
      })
    },
    save() {
      if (!this.user.id) {
        this.$message.warning("请登录后操作")
        return
      }
      this.commentForm.itemId = this.commentItemId
      if (this.commentForm.contentReply) {
        this.commentForm.content = this.commentForm.contentReply
      }
      this.request.post("/comment", this.commentForm).then(res => {
        if (res.code === '200') {
          this.$message.success("评论成功")
          this.commentForm = {}  // 初始化评论对象内容
          this.loadComment()
          this.dialogFormVisible2 = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    del(id) {
      this.request.delete("/comment/" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.loadComment()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleReply(pid) {
      this.commentForm = {pid: pid}
      this.dialogFormVisible2 = true
    },
    reset() {
      this.name = ""
      this.load()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
  }
}
</script>

<style scoped>
.comment-send-warp {
  position: relative;
}

.comment-send-warp .btn-sent-comment {
  position: absolute;
  bottom: 35px;
  right: 30px
}

.comment-send-input {
  padding: 20px 10px;
  font-size: 16px;

}

.el-textarea__inner {
  padding: 15px;
  font-family: '微软雅黑';
}

.comment-warp {
  padding: 0 10px;
}

.comment-item {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.comment-item-reply {
  margin-left: 22px;
  margin-right: -30px;
  transform: scale(0.9);
  padding-left: 10px;
  border-radius: 4px;
}

.comment-item .comment-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}

.comment-item .comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-info {
  flex: 1;
}

.comment-info .comment-name {
  color: #8c939d;
  font-size: 14px;
}

.comment-info .comment-content {
  color: #8c939d;
  font-size: 14px;
  margin-top: 4px;
  font-size: 16px;
  color: #666;
  text-align: justify;
}

.comment-info .comment-other {
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  font-size: 14px;
  margin-top: 2px;
  color: #9499A0;
}

.comment-info .comment-other .comment-time {
  margin-right: 20px;
  min-width: 170px;
}

.comment-info .comment-other .comment-time i {
  margin-right: 4px;
}

.comment-info .comment-other .el-button {
  color: #9499A0;
}
</style>